<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        #app>.fc{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 
    template 是HTML5 新增的  web components 容器定义标签
    -->
    <hr>
    <div id="app">
        <pre v-pre class="note">
        问题1、提供统一容器为 v-for 构建范围
            + vue提供 v-if 和 v-for 的结构辅助标签 template，通过该标签进行包裹，可以将没有关系的元素构成包裹关系
        问题2、构建范围的容器不能变换已存在的标签结构
            + vue 提供的 template 标签，本身不会在页面渲染时作为真实标签进行渲染，vue渲染完成后，该标签会被移除，
              可以实现原始页面结构不发生改变的操作
        </pre>

        <span class="fc">第一步:</span>
        <span>定义用户名</span>
        <hr>
        <span class="fc">第二步:</span>
        <span>绑定手机</span>
        <hr>
        <span class="fc">第二步:</span>
        <span>绑定邮箱</span> 
        <hr>
        <p>-------------------------------</p>
        <span v-for="item in steps" class="fc">{{ item.title }}:</span>
        <span v-for="item in steps">{{ item.info }}</span>
        <hr v-for="item in steps">
        <p>-------------------------------</p>
        <div v-for="item in steps">
            <span class="fc">{{ item.title }}:</span>
            <span>{{ item.info }}</span>
            <hr>
        </div>
        <p>-------------------------------</p>
        <template v-for="item in steps">
            <span class="fc">{{ item.title }}:</span>
            <span>{{ item.info }}</span>
            <hr>
        </template>

    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    steps:[
                        { title:"第一步",info:"定义用户名" },
                        { title:"第二步",info:"绑定手机" },
                        { title:"第三步",info:"绑定邮箱" },
                        { title:"第四步",info:"绑定地址" },
                    ]
                }
            }
        }).mount("#app");
    </script>
</body>
</html>